import React from 'react';
import { Layout, Menu } from 'antd';
import {
    FolderOutlined,
    FileImageOutlined,
    FileTextOutlined,
    CustomerServiceOutlined,
    VideoCameraOutlined,
    FileZipOutlined,
    AppstoreOutlined,
    FileUnknownOutlined
} from '@ant-design/icons';
import { FileType, FileSidebarProps, FileTypeMenuItem } from '../types';
import styles from '../FileMgr.module.css';

const { Sider } = Layout;

const FileSidebar: React.FC<FileSidebarProps> = ({
    onFileTypeSelect,
    selectedFileType
}) => {
    const fileTypeItems: FileTypeMenuItem[] = [
        {
            key: 'all',
            icon: <AppstoreOutlined className={styles.fileTypeIcon} />,
            label: '全部文件',
            type: null
        },
        {
            key: 'document',
            icon: <FileTextOutlined className={styles.fileTypeIcon} />,
            label: '文档',
            type: FileType.DOCUMENT
        },
        {
            key: 'image',
            icon: <FileImageOutlined className={styles.fileTypeIcon} />,
            label: '图片',
            type: FileType.IMAGE
        },
        {
            key: 'audio',
            icon: <CustomerServiceOutlined className={styles.fileTypeIcon} />,
            label: '音频',
            type: FileType.AUDIO
        },
        {
            key: 'video',
            icon: <VideoCameraOutlined className={styles.fileTypeIcon} />,
            label: '视频',
            type: FileType.VIDEO
        },
        {
            key: 'folder',
            icon: <FolderOutlined className={styles.fileTypeIcon} />,
            label: '文件夹',
            type: FileType.FOLDER
        },
        {
            key: 'archive',
            icon: <FileZipOutlined className={styles.fileTypeIcon} />,
            label: '压缩包',
            type: FileType.ARCHIVE
        },
        {
            key: 'other',
            icon: <FileUnknownOutlined className={styles.fileTypeIcon} />,
            label: '其他',
            type: FileType.OTHER
        }
    ];

    const handleMenuClick = (key: string) => {
        const selectedItem = fileTypeItems.find(item => item.key === key);
        if (selectedItem) {
            onFileTypeSelect(selectedItem.type);
        }
    };

    return (
        <Sider
            width={200}
            theme="light"
            style={{ background: '#fff' }}
        >
            <Menu
                mode="inline"
                className={styles.sidebarMenu}
                selectedKeys={[selectedFileType || 'all']}
                items={fileTypeItems.map(item => ({
                    key: item.key,
                    icon: item.icon,
                    label: item.label,
                    onClick: () => handleMenuClick(item.key)
                }))}
            />
        </Sider>
    );
};

export default FileSidebar; 